<template>
    <div class="myorder">
        <h4>
            我的订单
            <div @click="$router.push({path:'/Allorder',query:{active:0}})">
                <p>全部订单 <van-icon name="arrow" /></p>
            </div>
        </h4>
        <div class="list">
            <div class="item" @click="$router.push({path:'/Allorder',query:{active:1}})">
                <van-icon name="balance-pay" />
                <p>待付款</p>
            </div>
            <div class="item" @click="$router.push({path:'/Allorder',query:{active:2}})">
                <van-icon name="tosend" />
                <p>待配送</p>
            </div>
            <div class="item" @click="$router.push({path:'/Allorder',query:{active:3}})">
                <van-icon name="logistics" />
                <p>待收货</p>
            </div>
            <div class="item" @click="$router.push({path:'/Allorder',query:{active:4}})">
                <van-icon name="comment-o" />
                <p>待评价</p>
            </div>
            <div class="item" @click="$router.push('/Aftersale')">
                <van-icon name="cash-o" />
                <p>售后服务</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.myorder {
    height: 100%;
    width: 100%;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 25px;

    h4 {
        display: flex;
        justify-content: space-between;
        color: #252525;
        font-size: 14px;
        padding: 8px 5px;
        border-bottom: 1px solid #898989;

        p {
            color: #898989;
        }
    }

    .list {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 10px;
        text-align: center;

        .van-icon {
            font-size: 30px;
            color:#00ba5d ;
        }

        p {
            margin-top: 10px;
            font-size: 14px;
        }
    }
}
</style>